<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover" class="vab-card" :body-style="{ padding: '0',height:'200px'}">
              <div style="height: 100%;">
                <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>商品
                </span>
                </div>
                <div class="vab-text flex">
                  <span class="vab-sold">
                    <span class="vab">已售数量</span>
                    <span class="vab-num">3662</span>
                  </span>
                  <span class="vab-sold">
                    <span class="vab">待售数量</span>
                    <span class="vab-num">3662</span>
                  </span>
                  <span class="vab-sold">
                    <span class="vab">好评率</span>
                    <span class="vab-num">99%</span>
                  </span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover" :body-style="{padding: '0', height:'490px'}" class="order-content">
              <div>
                <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>订单
                </span>
                </div>
                <el-row>
                  <el-col :span="12" class="order-content-sold">
                    <p>已完成订单</p>
                    <h1>5,489</h1>
                  </el-col>
                  <el-col :span="12" class="order-content-sold">
                    <p>计划完成订单</p>
                    <h1>9,744</h1>
                  </el-col>
                </el-row>
              </div>
              <el-row class="order-content-chart">
                <div ref="chart-line" class="line"></div>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="24" style="margin-bottom: 20px">
            <el-card shadow="hover" :body-style="{padding: '0', height:'380px'}" class="order-content">
              <div>
                <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>小目标
                </span>
                </div>
              </div>
              <el-row class="order-content-chart-bar">
                <div ref="chart-bar" class="bar"></div>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card shadow="hover" :body-style="{padding: '0', height:'310px'}" class="order-content">
              <div>
                <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>销售额
                </span>
                </div>
              </div>
              <el-row class="order-content-chart-bar">
                <div ref="chart-line-sold" class="bar"></div>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'workbench',
  methods: {
    drawLine() {
      let content = this.$refs['chart-line']
      let myChart = this.$echarts.init(content)
      let dataObj = {
        year: ['第一季度', '第二季度', '第三季度', '第四季度'],
        data: {
          value: [{
            name: '已完成订单',
            value: [2120, 1542, 3423, 421]
          }, {
            name: '计划完成订单',
            value: [1451, 2130, 1874, 3214]
          }]
        }
      }
      let dataArr = []

      dataObj.data.value.map(item => {
        let newArr = {
          name: item.name,
          type: 'line',
          smooth: true,
          symbolSize: 8,
          data: item.value,
          barWidth: '30%',
          itemStyle: {
            normal: {
              color: item.name === '已完成订单' ? '#f0c725' : item.name === '计划完成订单' ? '#0BE3FF' : '#16f892'
            }
          }
        }

        dataArr.push(newArr)
      })
      let option = {
        backgroundColor: '#fff',
        color: ['#f0c725', '#16f892'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '8%',
          right: '8%',
          top: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: dataObj.year,
          axisLine: {
            lineStyle: {
              color: 'rgba(240,199,37,0.5)'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#333',
            fontSize: '12'
          }
        }],
        yAxis: [{
          type: 'value',
          nameTextStyle: {
            color: '#c1cadf',
            align: 'right'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(240,199,37,0.5)'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#333',
            fontSize: '12'
          },
          splitLine: {
            show: false
          }
        }],
        series: dataArr
      }
      myChart.setOption(option)
    },
    drawBar() {
      let content = this.$refs['chart-bar']
      let myChart = this.$echarts.init(content)
      let appusage_data = [
        {
        value: 654,
          itemStyle: { color: '#1F78B4' }
      }, {
        value: 465,
          itemStyle: { color: '#A6CEE3' }
      }, {
        value: 542,
          itemStyle: { color: '#B2DF8A' }
      }, {
        value: 346,
          itemStyle: { color: '#33A02C' }
      }, {
        value: 368,
          itemStyle: { color: '#FB9A99' }
      }, {
          value: 419,
          itemStyle: { color: '#E31A1C' }
        }
      ];
      let option = {
        "tooltip": {
          "trigger": "axis",
          "axisPointer": { // 坐标轴指示器，坐标轴触发有效
            "type": "shadow" // 默认为直线，可选为："line" | "shadow"
          }
        },
        "grid": {
          top:'5%',
          "left": "3%",
          "right": "10%",
          "bottom": "3%",
          "containLabel": true
        },
        "yAxis": [{
          "type": "category",
          "data": ["麻章区", "红霞区", "龙岗区", "龙华区", "官渡区",'宝安区'],
          "axisLine": {
            "show": false
          },
          "axisTick": {
            "show": false,
            "alignWithLabel": true
          },
          "axisLabel": {
            "textStyle": {
              "color": "#efbc11"
            }
          }
        }],
        "xAxis": [{
          "type": "value",
          "axisLine": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          "axisLabel": {
            "show": false
          },
          "splitLine": {
            "show": false
          }
        }],

        "series": [
          {
          "type": "bar",
          "data": appusage_data,
          "barCategoryGap": "35%",
          "label": {
            "normal": {
              "show": true,
              "position": "right",
              "formatter": '{c}亿元',
              "textStyle": {
                "color": "#55589d" //color of value
              }
            }
          },
          itemStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: "rgba(112,180,187)" // 0% 处的颜色
              }, {
                offset: 1,
                color: "rgba(23,82,143)" // 100% 处的颜色
              }], false)
            }
          }
        }]
      };
      myChart.setOption(option)
    },
    drawBarSold() {
      let content = this.$refs['chart-line-sold']
      let myChart = this.$echarts.init(content)
      const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          top: '15%'
        },
        xAxis: [{
          type: 'category',
          data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
          axisLine: {
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#556677'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
          },
          axisPointer: {
            label: {
              // padding: [11, 5, 7],
              padding: [0, 0, 10, 0],
              // 这里的margin和axisLabel的margin要一致!
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#fff' // 0% 处的颜色
                }, {
                  // offset: 0.9,
                  offset: 0.86,
                  color: '#fff' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#33c0cd' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#33c0cd' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#556677'
            }
          },
          splitLine: {
            show: false
          }
        }, {
          type: 'value',
          position: 'right',
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#556677'
            },
            formatter: '{value}'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: 'Adidas',
          type: 'line',
          data: [10, 10, 30, 12, 15, 3, 7],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 5,
            color:  this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#9effff'
            },
              {
                offset: 1,
                color: '#9E87FF'
              }
            ]),
            shadowColor: 'rgba(158,135,255, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            normal: {
              color: colorList[0],
              borderColor: colorList[0]
            }
          }
        }, {
          name: 'Nike',
          type: 'line',
          data: [5, 12, 11, 14, 25, 16, 10],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 5,
            color:  this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [{
              offset: 0,
              color: '#73DD39'
            },
              {
                offset: 1,
                color: '#73DDFF'
              }
            ]),
            shadowColor: 'rgba(115,221,255, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            normal: {
              color: colorList[1],
              borderColor: colorList[1]
            }
          }
        },
          {
            name: '老北京布鞋',
            type: 'line',
            data: [150, 120, 170, 140, 500, 160, 110],
            symbolSize: 1,
            yAxisIndex: 1,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 5,
              color:  this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#fe9a'
              },
                {
                  offset: 1,
                  color: '#fe9a8b'
                }
              ]),
              shadowColor: 'rgba(254,154,139, 0.3)',
              shadowBlur: 10,
              shadowOffsetY: 20
            },
            itemStyle: {
              normal: {
                color: colorList[2],
                borderColor: colorList[2]
              }
            }
          }
        ]
      };
      myChart.setOption(option)
    }
  },
  mounted() {
    this.drawLine()
    this.drawBar()
    this.drawBarSold()
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding-bottom: 70px;
  .grid-content {
    border-radius: 0px !important;
  }

  .order-content, .vab-card {
    .vab-text {
      width: 100%;
      padding: 30px;
      color: #fff;

      .vab {
        font-size: 14px;
      }

      .vab-num {
        margin: 15px 0;
        font-weight: 600;
        font-size: 28px;
      }

      .vab-sold {
        flex: 1;
        text-align: center;

        span {
          display: block;
          text-align: center;
        }
      }
    }

    .head-chart {
      display: flex;
      padding: 20px 20px 20px 20px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E4E7ED;

      .icon-chart {
        font-size: 14px;

        i {
          margin-right: 5px;
        }
      }
    }

    .order-content-sold {
      padding: 20px;
      text-align: center;

      p {
        font-size: 14px;
      }

      h1 {
        margin: 15px 0;
        font-weight: 600;
        font-size: 28px;
      }
    }
    .order-content-chart-bar {
      height: 85%;
      .bar {
        width: 100%;
        height: 100%;
      }
    }

    .order-content-chart {
      height: 60%;

      .line {
        width: 100%;
        height: 100%;
      }
    }
  }

  .vab-card {
    color: #fff;
    background: linear-gradient(90deg, #60b2fb, #6485f6);
  }
}

</style>
